<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试跟随鼠标移动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <img src="./imgs/img.jpg" width="100" alt="">
</body>
<script>
    var photo = document.querySelector('img')
    var targetX = 0//目标值
    var targetY = 0
    var leaderX = 0//步长值
    var leaderY = 0

    // 事件源对象
    document.onclick = function (event) {
        //IE源对象window.event
        var e = event || window.event
        targetX = e.clientX - photo.offsetWidth / 2
        targetY = e.clientY - photo.offsetHeight / 2
    }

    function fn() {
        leaderX = leaderX + (targetX - leaderX) / 10
        leaderY = leaderY + (targetY - leaderY) / 10

        photo.style.left = leaderX + 'px';
        photo.style.top = leaderY + 'px'
    }
    setInterval(fn, 30)
</script>

</html>